<template>
  <div>
    <div>
      小区信息
      <el-button
        type="primary"
        class="button"
        style="float: right"
        @click="add()"
        >新建小区</el-button
      >
    </div>
    <!-- 编辑 -->
    <el-dialog title="楼座编辑" :visible.sync="dialogFormVisibleEdit">
      <el-form
        label-position="right"
        label-width="80px"
        :model="forms"
        style="width: 400px; margin-left: 200px; margin-top: 40px"
      >
        <el-form-item label="小区名称">
          <el-input v-model="forms.communityName"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="forms.address"></el-input>
        </el-form-item>
        <el-form-item label="建成日期">
          <el-date-picker
            type="datetime"
            v-model="forms.builtTime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <!-- <el-input v-model="formLabelAlign.type"></el-input> -->
        </el-form-item>
        <el-form-item label="房屋用途">
          <el-select
            clearable
            style="width: 100%"
            v-model="forms.houseUse"
            placeholder="请选择"
          >
            <el-option label="普通住宅" value="普通住宅"></el-option>
            <el-option label="商业用地" value="商业用地"></el-option>
            <el-option label="商住两用" value="商住两用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小区面积">
          <el-input v-model="forms.plotArea"></el-input>
        </el-form-item>
        <el-form-item label="楼栋数量">
          <el-input v-model="forms.buildingSum"></el-input>
        </el-form-item>
        <el-form-item label="停车车位">
          <el-input v-model="forms.temporaryCarSum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="updatecommunity">确 定</el-button>
      </div>
    </el-dialog>
    <div style="width: 80%; margin-top: 30px; margin: 0 auto">
      <el-row style="margin-top: 50px">
        <el-col :span="4.5" v-for="o in x" :key="o">
          <el-card class="card01">
            <img
              width="230px"
              height="140px"
              src="http://www.bala.cc/uploads/allimg/181201/1_181201114312_1.jpg"
              class="image"
            />
            <div>
              <span>{{ o.communityName }}</span> <br />
              <span>{{ o.address }}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="button" @click="gl(o)"
                  >管理</el-button
                >
                <el-button type="text" class="button" @click="update(o)"
                  >编辑</el-button
                >
                <el-button type="text" class="button" @click="del(o)"
                  >删除</el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: "",
      forms: {
        communityName: "",
        address: "",
        builtTime: "",
        houseUse: "",
        plotArea: "",
        buildingSum: "",
        temporaryCarSum: "",
        communityId:"",
      },
      dialogFormVisibleEdit: false, // 用于用户编辑弹窗控制关闭
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.$axios.get("/serverzc/plot/findplot").then((res) => {
        this.x = res.data.data.data;
        console.log(res.data);
      });
    },
    del(o) {
      console.log(o.communityId);
      this.$axios
        .get("/serverzc/plot/delplot?id=" + o.communityId)
        .then((res) => {
          this.load();
        });
    },
    gl(o) {
      this.$router.push({
        path: "/Head",
      });
      // console.log(o.communityId);
      localStorage.removeItem("communityId");
      localStorage.setItem("communityId", o.communityId);
      localStorage.removeItem("communityName");
      localStorage.setItem("communityName", o.communityName);
    },
    add() {
      this.$router.push({
        path: "/addplot",
      });
    },
    update(o) {
      this.dialogFormVisibleEdit = true;
      this.forms.communityName = o.communityName;
      this.forms.address = o.address;
      this.forms.builtTime = o.builtTime;
      this.forms.houseUse = o.houseUse;
      this.forms.plotArea = o.plotArea;
      this.forms.buildingSum = o.buildingSum;
      this.forms.temporaryCarSum = o.temporaryCarSum;
      this.forms.communityId = o.communityId;
    },
    updatecommunity() {
      this.$axios
        .post("/serverzc/plot/updatecommunity", this.forms)
        .then((res) => {
          this.dialogFormVisibleEdit = false;
          this.load();
        });
    },
  },
};
</script>

<style>
.card01 {
  margin-left: 50px;
  margin-top: 20px;
}
</style>